<template>
    <el-dialog v-model="dialogVisible" title="新增科目" width="400" @close="close">
      <template #default>
        <el-form :model="rolefrom">
          <!-- 角色名称 -->
          <el-form-item label="科目名称">
            <el-input v-model="rolefrom.subjectName" placeholder="请填写科目名称">
            </el-input>
          </el-form-item>
          <!-- 状态 -->
          <el-form-item label="科目状态">
            <el-radio-group v-model="rolefrom.enabled">
              <el-radio v-for="item in dicts.system_global_status" :key="item.id"
                :label="rolefrom.enabled == item.v ? rolefrom.enabled : item.v">{{
                  item.k
                }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="close">取消</el-button>
          <el-button @click="onSubmint" type="primary">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </template>
  
  <script lang="ts" setup>
  import { subjectAdd } from '@api/teachSubject'
  import { ref, reactive, ComponentInternalInstance, getCurrentInstance, onBeforeMount } from 'vue'
  const rolefrom = reactive({
    subjectName:'',
    enabled:''
  })
  const props = defineProps({
    dialogVisible: {
      type: Boolean,
      // 为默认值
      default: false
    }
  })
  //弹窗的状态
  const dialogVisible = ref(props.dialogVisible)

  // 关闭dialog
  const emit = defineEmits()
  const close = () => {
    emit('update:dialogVisible',false)
  }
   
  // 点击确定按钮
  const onSubmint = async () => {
    console.log('====================================');
    console.log(rolefrom);
    console.log('====================================');
    await subjectAdd(rolefrom);
    emit('subjectChange')
    close()
  }
  // 声明周期
onBeforeMount(() => {
  // 字典
  const { proxy } = getCurrentInstance() as ComponentInternalInstance
  if (proxy) {
    (proxy as any).getDicts(['system_global_status', 'system_global_gender'])
  }
  
})
  </script>
  
  <style scoped>
  .tree {
    border: 1px solid #dcdfe6;
    margin-top: 0.5rem;
    background-color: #FFF;
    border-radius: 4px;
  }
  </style>
  